<template>
  <div style="height: 100%;">
    <div class="vform-render">
      <!--主要渲染器-->
      <v-form-render v-if="showMain" :ref="pageId" :form-json="formJson" :form-data="formData" :previewState="true" :props="props"></v-form-render>
      <!--弹窗渲染器-->
      <transition v-for="item in formList" :key="item.pageId" name="el-fade-in-linear">
        <v-form-render
          :ref="item.pageId"
          v-if="item.openFlag"
          :form-json="item.formJson"
          :form-data="item.formData"
          :previewState="true"
          :props="item.props" >
        </v-form-render>
      </transition>
    </div>
  </div>
</template>
<script>
import { getPage } from "@/api/system/page";
export default {
  data() {
    return {
      pageId:undefined,
      formJson: {},
      formData: {},
      props:{},
      showMain:false,
      previewState:false,

      formList:[],//弹窗页面集合
      pageRefList:[],//缓存加载过的页面Json
    }
  },
  created() {
    //约定格式：/vform/render/ + 页面ID
    let page = this.$route.name;
    let pageId = page.split("/")[2];
    let query = this.$route.query;
    if (pageId) {
      this.init({id:pageId,data:query});
    }else{
      this.$message.error('页面获取失败');
    }
  },
  methods: {
    //获取页面的json数据
    async init(params){
      let that = this;
      this.pageId = params.id;//设置主页面的引用
      await getPage(params.id).then((res) => {
        if(res.data.pageContent){
          that.formData = {},
          that.formJson = JSON.parse(that.unescapeHTML(res.data.pageContent)),
          that.props = Object.assign({},params.data)
          that.showMain = true
          that.formList = [];//清空弹窗页面
          that.pageRefList.push({pageId:params.id,pageRef:that})//设置当前主页的引用

          //将主页引用添加至页面
          that.$nextTick(()=>{
            that.$refs[params.id + ""].addEC(params.id,that);
          })
        }
      }).catch((_) => {})
    },
    //获取弹窗页面的json数据
    async openM(params){
      let that = this;
      await getPage(params.id).then((res) => {
        if(res.data.pageContent){
          let pageIndex = that.pageRefList.findIndex(item => item.pageId === params.id);
          if(pageIndex!==-1){
            that.pageRefList.splice(pageIndex, 1);
          }
          that.pageRefList.push({pageId:params.id,pageRef:that})

          //判断是否已经加载过页面
          let form = that.formList.find(item => item.pageId === params.id);
          if(form){
            form.pageId = params.id + "",
            form.formData = {};
            form.openFlag = false;
            form.formJson = JSON.parse(that.unescapeHTML(res.data.pageContent));
            form.props = Object.assign({},params.data);
          }else{
            that.formList.push({
              pageId:params.id + "",
              openFlag:true,
              formData:{},
              formJson:JSON.parse(that.unescapeHTML(res.data.pageContent)),
              props:Object.assign({},params.data)
            })
          }

          that.$nextTick(()=>{
            if(form){
              form.openFlag = true;
            }
            //引用设置完成后再将引用添加至页面
            that.$nextTick(()=>{
              that.pageRefList.forEach(item=>{
                that.$refs[params.id + ""][0].addEC(item.pageId,item.pageRef);
              })
            })
          })
        }
      }).catch((_) => {})
    },

    //不请求数据直接弹出
    async openF(params){
      let that = this;
      if(params.formContent){
        let pageIndex = that.pageRefList.findIndex(item => item.pageId === params.id);
        if(pageIndex!==-1){
          that.pageRefList.splice(pageIndex, 1);
        }
        that.pageRefList.push({pageId:params.id,pageRef:that})
        //判断是否已经加载过页面
        let form = that.formList.find(item => item.pageId === params.id);
        if(form){
          form.pageId = params.id + "",
          form.openFlag = false;
          form.formJson = JSON.parse(that.unescapeHTML(params.formContent));
          form.formData = {};
          form.props = params.data;
        }else{
          that.formList.push({
            pageId:params.id + "",
            openFlag:true,
            formJson:JSON.parse(that.unescapeHTML(params.formContent)),
            formData:{},
            props:params.data
          })
        }

        that.$nextTick(()=>{
          if(form){
            form.openFlag = true;
          }
          //引用设置完成后再将引用添加至页面
          that.$nextTick(()=>{
            that.pageRefList.forEach(item=>{
              that.$refs[params.id + ""][0].addEC(item.pageId,item.pageRef);
            })
          })
        })
      }
    },
    //路由跳转
    router(params){
      let path = params.path;
      let query = Object.assign({},params.data);
      this.$router.push({ path, query});
    },
    //页面内路由跳转，并传参，需要给vform增加props参数
    async navigator(params){
      let that = this;
      await getFormPage(params.id).then((res) => {
        if(res.data.pageContent){
          that.formList = [];
          that.pageRefList = [];
          that.formList.push({
            pageId:params.id + "",
            formData:{},
            formJson:JSON.parse(that.unescapeHTML(res.data.pageContent)),
            props:Object.assign({},params.data)
          })
          that.pageRefList.push({pageId:params.id,pageRef:that})
          that.$nextTick(()=>{
            that.pageRefList.forEach(item=>{
              that.$refs[params.id + ""][0].addEC(item.pageId,item.pageRef);
            })
          })
        }
      }).catch((_) => {})
    },
    unescapeHTML(text) {
      return text.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
    },
    //===========================设计器事件====================================
    execute(eventMethods,param){
      let page = this.pageRefList.find(item => item.pageId === param.id);
      return page.pageRef.$refs[param.id][0].execute(eventMethods,param);
    },
    resolvePromise(param){
      let page = this.pageRefList.find(item => item.pageId === param.id);
      return page.pageRef.$refs[param.id][0].resolvePromise(param);
    },
    submitValid(callback){
      return this.$refs[0].submitValid(callback);
    },
    resolveDataSource(dataSource){
      let page = this.pageRefList.find(item => item.pageId === dataSource.id);
      return page.pageRef.$refs[dataSource.id][0].resolveDataSource(dataSource);
    },
    resolveDataSourceCallback(dataSource, successCallback, errorCallback){
      let page = this.pageRefList.find(item => item.pageId === dataSource.id);
      return page.pageRef.$refs[dataSource.id][0].resolveDataSourceCallback(dataSource, successCallback, errorCallback);
    },
  }
}
</script>

<style lang="scss" scoped>
  .vform-render  {
    overflow-x: hidden;
    //margin:-2px -10px 0px -10px;
    background: #e7e7e7;
  }
</style>
